<template>
  <el-dialog title="产品库存详情" width="900px" :modelValue="modelValue" @close="handleClose" draggable align-center :close-on-click-modal="false">
    <div class="h-[80vh] flex" style="flex-direction: column">
      <div class="flex my-[8px]">
        <div v-for="item in skuColumns" :key="item.value" class="mr-[16px]">
          <VText :title="item.label" :value="skuInfo[item.value]" line="1" />
        </div>
      </div>
      <!-- <div class="flex-1"> -->
      <!-- <vxe-grid v-bind="orderOptions" ref="tableRef" height="auto" /> -->
      <el-table :data="skuInfo.tableData" border style="width: 100%">
        <el-table-column v-for="item in tableColumns" :key="item.field" :prop="item.field" :label="item.title" :width="item.width" />
      </el-table>
      <!-- </div> -->

      <!-- <el-tab-pane label="订单SKU" name="1">
        <div v-if="isAssembles" class="mb-[8px]">组合SKU：{{ formData.sku }}</div>
        <el-table :data="formData.tableData" border style="width: 100%">
          <el-table-column v-for="item in tableColumns" :key="item.field" :prop="item.field" :label="item.title" :width="item.width" />
        </el-table>

      </el-tab-pane> -->
      <!-- 组合SKU -->
      <div v-if="isAssembles">
        <div v-for="item in skuInfo.combination_list" :key="item.sku" class="mt-[12px]">
          <div class="my-[8px]">子SKU：{{ item.sku }} 数量*{{ item.quantity }}</div>
          <el-table :data="item.table" border style="width: 100%">
            <el-table-column v-for="items in tableColumns" :key="items.field" :prop="items.field" :label="items.title" :width="items.width" />
          </el-table>
        </div>
      </div>
    </div>
    <template #footer>
      <el-button type="primary" @click="handleClose"> 确认 </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="jsx">
import { computed, nextTick, watch } from "vue"
import XForm from "@/components/XForm/index.vue"

import { ownerInventory, inventoryPlatformStat } from "@/api/amazon"
import { siteCountryList } from "../api.js"

const formOption = ref({ inline: true, option: true, showResetButton: true, submitButtonText: "查询" })

const skuInfo = ref({})
const tableRef = ref()
const skuColumns = [
  { label: "SKU", value: "sku" },
  { label: "ASIN", value: "asin" },
  { label: "渠道SKU", value: "platform_sku" },
]

const activeName = ref()
const isAssembles = ref(false)
// 查询
const handleSubmitForm = async () => {
  // console.log(tableRef?.value)
  console.log(skuInfo.value)

  // tableRef?.value.commitProxy("query")

  // let siteCountry = await siteCountryList({ platform_id: 67 })
  // let country = siteCountry.data.filter((v) => skuInfo.value.bind_site.includes(v.site_id))
  // country = country.map((v) => v.countries).flat()
  // const res = await inventoryPlatformStat({ query_sku: skuInfo.value.sku ? [skuInfo.value.sku] : [], country })
  // // let inventory = res.data?.inv
  // console.log(res.data?.inv)
  // // combination_list
  // isAssembles.value = !!skuInfo.value.combination_list.length
  // skuInfo.tableData = res.data?.inv

  let siteCountry = await siteCountryList({ platform_id: 67 })
  let country = siteCountry.data.filter((v) => skuInfo.value.bind_site.includes(v.site_id))
  country = country.map((v) => v.countries).flat()
  isAssembles.value = !!skuInfo.value.combination_list.length
  inventoryPlatformStat({ query_sku: skuInfo.value.sku ? [skuInfo.value.sku] : [], country }).then((res) => {
    skuInfo.value.tableData = res.data?.inv
    skuInfo.value.combination_list.forEach(async (row) => {
      row.table = (await inventoryPlatformStat({ query_sku: [row.sku], country }))?.data?.inv
    })
  })
}

onMounted(() => {})

const modelValue = ref(false)

const emit = defineEmits(["refresh", "close"])

const tableColumns = [
  { field: "warehouse_name", title: "仓库名称" },
  { field: "wms_attribute_cn", title: "仓库属性", width: "100" },
  // { field: "asin", title: "ASIN", width: "120" },
  // { field: "owner_name", title: "货主", width: "180" },
  { field: "country", title: "发货国家", width: "140" },
  { field: "num", title: "可用库存", width: "90" },
  { field: "lock_num", title: "锁定库存", width: "90" },
  { field: "transit_num", title: "在途库存", width: "90" },
]

// const orderOptions = reactive({
//   border: true,
//   loading: false,
//   resizable: true,
//   columns: [
//     { field: "warehouse_name", title: "仓库名称" },
//     { field: "wms_attribute_cn", title: "仓库属性", width: "140" },
//     // { field: "asin", title: "ASIN", width: "100" },
//     // { field: "owner_name", title: "货主" },
//     { field: "country", title: "发货国家", width: "140" },
//     { field: "num", title: "可用库存", width: "100" },
//     { field: "lock_num", title: "锁定库存", width: "100" },
//     { field: "transit_num", title: "在途库存", width: "100" },
//   ],
//   data: [],
//   // proxyConfig: {
//   //   autoLoad: false, // 是否自动加载查询数据
//   //   ajax: {
//   //     query: async ({ page }) => {
//   //       // console.log(1111)
//   //       let siteCountry = await siteCountryList({ platform_id: 67 })
//   //       let country = siteCountry.data.filter((v) => skuInfo.value.bind_site.includes(v.site_id))
//   //       country = country.map((v) => v.countries).flat()
//   //       const res = await inventoryPlatformStat({ query_sku: skuInfo.value.sku ? [skuInfo.value.sku] : [], country })
//   //       let inventory = res.data?.inv
//   //       return inventory
//   //     },
//   //   },
//   // },
// })

const handleClose = () => {
  modelValue.value = false
  // orderOptions.data = []
}
const open = async (row) => {
  modelValue.value = true
  // console.log(11111);

  skuInfo.value = { ...row }
  // console.log(skuInfo.value);

  // let siteCountry = await siteCountryList({ platform_id: 67 })
  // let aaaaa = siteCountry.data.filter((v) => row.bind_site.includes(v.site_id))
  // // row.bind_site
  // console.log(aaaaa.map((v) => v.countries.map((i) => i.country_code)).flat())
  nextTick(() => {
    handleSubmitForm()
  })
}

defineExpose({
  open,
})
</script>
<style lang="scss" scoped></style>
